
    <template>
        <div>
            <div style="float: left; margin-top: 10px; width: 200px;">
                <el-text size="large">id：</el-text>
                <el-input class="input2" v-model="userParm.userId" @change="getUserList()" :placeholder="$t('problemView.searchInput')" />
            </div>
            
            <div style="float: left; margin-top: 25px;"><el-text size="large">昵称或姓名</el-text></div>
            <el-input class="input" v-model="userParm.userName" @change="getUserList()" :placeholder="$t('problemView.searchInput')"  />
            
            


            <el-table :data="userList?.items">
                <el-table-column prop="id" show-overflow-tooltip label="id" width="200px" />
                <el-table-column prop="userName" show-overflow-tooltip label="昵称" width="100px" />
                <el-table-column prop="realName" show-overflow-tooltip label="真实姓名" width="150px" />
                <el-table-column prop="roles" show-overflow-tooltip label="角色" width="150px" />
                <el-table-column prop="isDisable"  label="禁封" width="57px" />
                <el-table-column prop="disableReason" show-overflow-tooltip label="禁封原因" width="150px" />
                <el-table-column prop="createTime" show-overflow-tooltip label="创建时间" width="170px" />
                <el-table-column label="操作" >
                    <template #default="scope">
                        <el-button type="danger" plain :disabled="scope.row.id==='1'" @click="disableParm.userId=scope.row.id,dislogVisibleUser=true">禁封</el-button>
                        <el-popconfirm title="你确定要删除吗" @confirm="delUser(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" plain :disabled="scope.row.id==='1'">删除</el-button>
                            </template>
                        </el-popconfirm>
                        
                        <el-button type="success" plain :disabled="scope.row.id==='1'" @click="async ()=>{await getUserRoleList(scope.row.id),dialogVisible=true}">角色</el-button>
                    </template>
                </el-table-column>
            
            </el-table>    

            <div class="pagination"><el-pagination layout="prev, pager, next" :page-size="userParm.pageSize" :current-page="userParm?.pageNo" :total="userList?.counts" @current-change="handlePageChange"/></div>
        </div>

        



        <el-dialog v-model="dialogVisible" width="300px" style="min-height: 300px;">

            <div style="text-align: center;">单击选择即可</div>

            <div>
                <div style="float: left;">
                    未获得的角色
                </div>
                <div style="margin-left: 60%;">
                    拥有的角色
                </div>
            </div>
            <div>
                <div style="min-height:200px; width: 40%; float: left; border: 2px solid #f7dfdf; box-shadow: 0 4px 8px rgba(246, 239, 239, 0.2);">
                    <div v-for="(value,index) in roleList.raminRoleList" :key="index">
                        <el-button type="warning" link @click="addRoleList.chooseroleList.push(value),roleList?.raminRoleList.splice(index,1)">{{value.roleName}}</el-button>
                    </div>
                </div>

                <div style="min-height:200px; width: 40%; float: right; border: 2px solid #f7dfdf; box-shadow: 0 4px 8px rgba(246, 239, 239, 0.2);">
                    <div v-for="(value,index) in addRoleList.chooseroleList" :key="index">
                        <el-button type="success" link @click="roleList?.raminRoleList.push(value),addRoleList.chooseroleList.splice(index,1)">{{value.roleName}}</el-button>
                    </div>
                </div>
            </div>

            <div style="text-align: center;margin-top: 85%;">
                <el-button type="info" plain @click="saveUserRole()">保存</el-button>
            </div>
        </el-dialog>


        <el-dialog v-model="dislogVisibleUser" width="600">
            <el-form>
                <el-form-item label="禁封原因">
                    <el-input  v-model="disableParm.reason"></el-input>
                </el-form-item>

                <el-form-item label="时间">
                    <el-input style="width: 50px;margin-right: 10px;margin-left: 28px;" v-model="disableParm.d"></el-input>天
                    <el-input style="width: 50px;margin-right: 10px; margin-left: 10px;" v-model="disableParm.h"></el-input>时
                    <el-input style="width: 50px;margin-right: 10px; margin-left: 10px;" v-model="disableParm.m"></el-input>分
                </el-form-item>

                <el-form-item>
                    <el-button type="danger" plain @click="diasbleUser">禁封</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </template>


    <script setup lang="ts">
        import { onMounted,ref } from 'vue';
        import useUserAdmin from '@/hooks/admin/useUserAdmin'


        const dialogVisible = ref(false)
        const dislogVisibleUser=ref(false)

        const {userParm,userList,roleList,addRoleList,disableParm,diasbleUser,getUserRoleList,saveUserRole,delUser,getUserList,handlePageChange}=useUserAdmin()
        onMounted(()=>{
            getUserList()
        })



    </script>

    <style scoped>

        .input{
            margin-top: 20px;
            margin-left: 10px;
            margin-bottom: 10px;
            width: 20%;
        }

        .input2{
            margin-top: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            width: 70%;
            height: 30px;
        }


        .pagination {
            margin-top: 10px;
            display: flex;  
            justify-content: center;
        }
    </style>